<template>
  <div class="fons_16">
    <commhead-2 name="我的"/>
    <div class="container">
      <div class="user">
        <div class="wid_30">
          <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="">
        </div>
        <div class="detail">
          <div>
            <span>用户名：</span>
            <span>{{user.username}}</span>
          </div>
          <div>
            <span>用户id：</span>
            <span>{{user.id}}</span>
          </div>
          <van-field name="uploader" label="文件上传">
            <template #input>
              <van-uploader v-model="uploader"  :after-read="afterRead" />
            </template>
          </van-field>
        </div>
      </div>
      <div @click="$router.push('/userdetail')">修改用户信息</div>
    </div>
    <span @click="$router.push('/addresslist')">收获地址</span>
    <tabbar/>
  </div>
</template>

<script>
import { fetUser } from '_api'
import { getToken } from '_utils'
import Commhead2 from '../../components/Commhead2.vue'
import Tabbar from '../../components/Tabbar.vue'
export default {
  data () {
    return {
      user: {},
      uploader: []
    }
  },
  mounted () {
    this.fetUser()
  },
  methods: {
    afterRead (file) {
      const form = new FormData()
      form.append('upfile', file.file)
      form.append('toekn', getToken())
      this.upload.post('/dfs/upload/file',
        form
      ).then(res => {
        console.log(res)
      })
    },
    onSubmit (data) {
      console.log(data)
    },
    fetUser () {
      fetUser({
        token: getToken()
      }).then(res => {
        this.user = res.data.data.base
      })
    }
  },
  components: { Tabbar, Commhead2 }
}
</script>

<style lang="scss" scoped>
.fons_16{
  font-size: 16px;
}
.container{
  padding-top: 45px;
  .user{
    display: flex;
  }
  .wid_30{
    width: 100px;
    height: 100px;
    img{
      width: 100%;
    }
  }
  .detail{
    flex : 1;
    text-align: left;
  }
}
</style>
